import React from 'react';
import { motion } from 'framer-motion';

// 法律装饰组件，包含多种装饰元素
const LegalDecorations = ({ type = 'default' }) => {
  
  const renderDecoration = () => {
    switch (type) {
      case 'goldenFrame':
        return <GoldenFrame />;
      case 'floatingScales':
        return <FloatingScales />;
      case 'floatingGavel':
        return <FloatingGavel />;
      case 'cornerScroll':
        return <CornerScroll />;
      case 'divider':
        return <LegalDivider />;
      default:
        return <DefaultDecorations />;
    }
  };
  
  return renderDecoration();
};

// 默认装饰，包含天平和锤子图标
const DefaultDecorations = () => (
  <>
    <motion.div 
      initial={{ opacity: 0, scale: 0.5 }}
      animate={{ opacity: 0.15, scale: 1 }}
      transition={{ duration: 1.5, repeat: Infinity, repeatType: "reverse" }}
      style={{ 
        position: 'absolute', 
        fontSize: '12rem',
        top: '10%',
        left: '5%',
        color: '#a67c00',
        zIndex: 0,
      }}
    >
      ⚖️
    </motion.div>
    <motion.div 
      initial={{ opacity: 0, scale: 0.5 }}
      animate={{ opacity: 0.15, scale: 1 }}
      transition={{ duration: 1.5, delay: 0.5, repeat: Infinity, repeatType: "reverse" }}
      style={{ 
        position: 'absolute', 
        fontSize: '12rem',
        bottom: '10%',
        right: '5%',
        color: '#a67c00',
        zIndex: 0,
      }}
    >
      🔨
    </motion.div>
  </>
);

// 黄金比例装饰框架
const GoldenFrame = () => (
  <motion.div
    initial={{ opacity: 0 }}
    animate={{ opacity: 1 }}
    transition={{ duration: 0.8 }}
    style={{
      position: 'relative',
      width: '100%',
      height: '100%',
      padding: '20px',
      boxSizing: 'border-box',
      zIndex: 0
    }}
  >
    {/* 四角装饰 */}
    {[
      { top: 0, left: 0, rotate: 0 },
      { top: 0, right: 0, rotate: 90 },
      { bottom: 0, right: 0, rotate: 180 },
      { bottom: 0, left: 0, rotate: 270 }
    ].map((pos, index) => (
      <motion.div
        key={index}
        initial={{ scale: 0 }}
        animate={{ scale: 1 }}
        transition={{ duration: 0.6, delay: index * 0.15 }}
        style={{
          position: 'absolute',
          width: '40px',
          height: '40px',
          ...pos,
          transformOrigin: 'center',
          transform: `rotate(${pos.rotate}deg)`,
          backgroundImage: `radial-gradient(circle at top left, transparent 70%, #a67c00 30%)`,
          opacity: 0.7
        }}
      />
    ))}

    {/* 中央华丽装饰 */}
    <motion.div
      initial={{ opacity: 0, scale: 0.9 }}
      animate={{ opacity: 0.6, scale: 1 }}
      transition={{ duration: 0.8, repeat: Infinity, repeatType: "reverse" }}
      style={{
        position: 'absolute',
        top: '50%',
        left: '50%',
        transform: 'translate(-50%, -50%)',
        width: '200px',
        height: '200px',
        backgroundImage: `radial-gradient(circle, rgba(166, 124, 0, 0.1) 0%, rgba(166, 124, 0, 0) 70%)`,
        borderRadius: '50%',
        zIndex: -1
      }}
    />
  </motion.div>
);

// 浮动天平装饰
const FloatingScales = () => (
  <motion.div
    initial={{ y: -5 }}
    animate={{ y: 5 }}
    transition={{ duration: 2, repeat: Infinity, repeatType: "reverse", ease: "easeInOut" }}
    style={{ 
      position: 'absolute', 
      fontSize: '4rem',
      top: '10%',
      right: '10%',
      color: '#a67c00',
      opacity: 0.4,
      zIndex: 0,
    }}
  >
    ⚖️
  </motion.div>
);

// 浮动锤子装饰
const FloatingGavel = () => (
  <motion.div
    initial={{ y: 5 }}
    animate={{ y: -5 }}
    transition={{ duration: 2, repeat: Infinity, repeatType: "reverse", ease: "easeInOut" }}
    style={{ 
      position: 'absolute', 
      fontSize: '4rem',
      bottom: '10%',
      left: '10%',
      color: '#a67c00',
      opacity: 0.4,
      transform: 'rotate(45deg)',
      zIndex: 0,
    }}
  >
    🔨
  </motion.div>
);

// 角落的卷轴装饰
const CornerScroll = () => (
  <motion.div
    initial={{ opacity: 0, rotate: -10 }}
    animate={{ opacity: 0.6, rotate: 0 }}
    transition={{ duration: 0.8 }}
    style={{
      position: 'absolute',
      top: '15px',
      left: '15px',
      width: '40px',
      height: '60px',
      backgroundColor: '#f8f0dd',
      borderRadius: '5px',
      boxShadow: '0 2px 5px rgba(0,0,0,0.2)',
      zIndex: 0,
      overflow: 'hidden'
    }}
  >
    <div style={{
      position: 'absolute',
      width: '100%',
      height: '100%',
      background: 'linear-gradient(transparent, #e0d1ae)',
    }}>
      <div style={{
        position: 'absolute',
        bottom: '0px',
        width: '100%',
        height: '10px',
        background: 'linear-gradient(#a67c00, #8b0000)',
      }}/>
    </div>
    <motion.div
      animate={{ y: [0, -50, 0] }}
      transition={{ duration: 10, repeat: Infinity, ease: "linear" }}
      style={{
        position: 'absolute',
        top: 0,
        width: '100%',
        fontSize: '8px',
        fontFamily: 'monospace',
        padding: '2px',
        color: '#1a2b48',
        wordBreak: 'break-all'
      }}
    >
      §§法典法规条文律法条例法理法义§§
    </motion.div>
  </motion.div>
);

// 法律风格分隔线
const LegalDivider = () => (
  <div style={{
    position: 'relative',
    width: '100%',
    height: '30px',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    margin: '15px 0',
    zIndex: 0
  }}>
    <div style={{
      width: '80%',
      height: '1px',
      background: 'linear-gradient(to right, transparent, #a67c00, transparent)'
    }}></div>
    <motion.div
      initial={{ scale: 0.8 }}
      animate={{ scale: 1.1 }}
      transition={{ duration: 1.5, repeat: Infinity, repeatType: "reverse" }}
      style={{ 
        position: 'absolute',
        fontSize: '1.5rem',
        color: '#a67c00'
      }}
    >
      ⚖️
    </motion.div>
  </div>
);

export default LegalDecorations; 